<style>
	tr
	{
		cursor:pointer;
		height:40px;		
	}
		
	tr.details, tr.details:hover
	{
		cursor:default;
		background-color:#ffffff;
	}

	tr:hover, tr.alternate:hover
	{
		background-color:#FFFDD0;
	}
	
	tr.alternate
	{
		background-color:#E2EFFF; 	
	}
</style>
<script>
	$(document).ready(function(){
		load_requisitions();
	});

	function load_requisitions()
	{
		$.ajax({
			url: '<?= base_url() ?>encoder/getlist/' + $('#month').val() + '/' + $('#year').val(),
			success: function(data){
				$('#requisition_list').empty();
				var requisitions = $.parseJSON(data);
				
				$('#requisition_list').append(
					'<tr>' +
						'<th style="width:100px;">Requisition #</th>' +
						'<th style="width:100px;">Date</th>' +
						'<th style="width:250px;">Materials</th>' +
						'<th style="width:150px;">Encoder</th>' +
						'<th style="width:150px;">Department Manager</th>' +
						'<th style="width:150px;">Canvasser</th>' +
						'<th style="width:150px;">Purchasing Manager</th>' +
					'</tr>'
				);				
								
				for(var i=0; i<requisitions.length; i++)
				{
					var materials = '';
					
					for(var j=0; j<requisitions[i].materials.length; j++)
					{						
						if(j == requisitions[i].materials.length - 1)
							materials += requisitions[i].materials[j].quantity + ' ' + requisitions[i].materials[j].unit + ' ' + requisitions[i].materials[j].name;
						else
							materials += requisitions[i].materials[j].quantity + ' ' + requisitions[i].materials[j].unit + ' ' + requisitions[i].materials[j].name + ', ';
					}
					
					var css = '';
					
					if(i%2 == 1)
						css = ' class="alternate"';
						
					var date = $.format.date(requisitions[i].date_created + ' 10:54:50.546', 'MMM. dd, yyyy');
				
					$('#requisition_list').append(
						'<tr' + css + '>' +
							'<td>' + requisitions[i].rr_number + '</td>' +
							'<td>' + date + '</td>' +
							'<td>' + materials + '</td>' +
							'<td></td>' +
							'<td></td>' + 
							'<td></td>' +
							'<td></td>' +
						'</tr>'
					);
					
				}				
			}
		});
	}
</script>
<br />
<div class="content_box left">
	<header>
		<div class="label">
			<img src="<?= base_url() ?>images/icons/information.png" alt=""><div>Dashboard</div>		
		</div>	
	</header>
	<section>
		<ul>
			<li>
				<a href="<?= base_url() ?>encoder/itemlist">Requisition List</a>
			</li>
			<li>
				<a href="<?= base_url() ?>encoder/newrequisition">New Requisition</a>
			</li>
		</ul>
	</section>
</div>
<div  class="content_box right">
	<header>
		<div class="label">
			<img src="<?= base_url() ?>images/icons/information.png" alt=""><div>My Requisitions</div>		
		</div>	
	</header>
	<section>
		<div style="padding:10px;">
			Filter: 
			<select id="month" onchange="load_requisitions()">
				<option value="0">All</option>
				<? for($i = 1; $i <= 12; $i++): ?>
					<option value="<?= $i ?>"><?= date('M', strtotime('2000-'.$i.'-01')) ?></option>
				<? endfor; ?>
			</select>
			<select id="year" onchange="load_requisitions()">
				<option value="0">All</option>
				<? for($i = -10; $i <= 0; $i++): ?>
					<option value="<?= date("Y") + $i ?>"><?= date("Y") + $i ?></option>
				<? endfor; ?>
			</select>			
			<input id="rr_number" type="text" placeholder="Requisition #" />
			<input id="material_name" type="text" placeholder="Material Name" />
			<div style="float:right; padding-top:5px;">
				<input id="my_requisitions" type="checkbox" /><label for="my_requisitions">My Requisitions Only</label>
			</div>
		</div>
		<form>
			<div style="overflow:auto;">
			<table id="requisition_list" style="width:1050px;">

			</table>
			</div>
		</form>
	</section>
</div>